import React, { useMemo } from 'react';
import ProForm, {
  QueryFilter,
  ProFormText,
  ProFormDatePicker,
  ProFormSelect,
} from '@ant-design/pro-form';
import PropTypes from 'prop-types';
import { Row, Col, Divider } from 'antd';
import { getPopupContainer } from '@/utils';
import styles from './CustomerQueryForm.less';

/**
 * @name 查询表单
 * @param { Number } defaultColsNumber 默认显示的表单筛选项数量
 * @param { Boolean } preserve 是否能够查询收起的数据，如果设置为 true，收起后的表单数据将会丢失
 * ? 更多配置：https://procomponents.ant.design/components/query-filter
 */
const CustomerQueryForm = ({ defaultColsNumber, labelWidth, preserve, data, ...props }) => {
  const formItemChildren = useMemo(
    () =>
      data.map((item) => {
        const { type, ...itemProps } = item;
        const { key, name, label } = itemProps;
        const startName = Array.isArray(name) ? name[0] : '';
        const endName = Array.isArray(name) ? name[1] : '';

        let formItem = null;
        switch (type) {
          case 'input':
            formItem = (
              <React.Fragment key={itemProps.key || itemProps.name}>
                <ProFormText {...itemProps} />
              </React.Fragment>
            );
            break;
          case 'select':
            formItem = (
              <React.Fragment key={itemProps.key || itemProps.name}>
                <ProFormSelect {...itemProps} />
              </React.Fragment>
            );
            break;
          case 'dateRange':
            formItem = (
              <React.Fragment key={key}>
                <ProForm.Item label={label}>
                  <Row>
                    <Col span={10} className={styles.dateRangeCol}>
                      <ProForm.Item name={startName} noStyle>
                        <ProFormDatePicker getPopupContainer={getPopupContainer} />
                      </ProForm.Item>
                    </Col>
                    <Col span={2} offset={1} className={styles.dateRangeDividerCol}>
                      <Divider type="horizontal" />
                    </Col>
                    <Col span={10} offset={1} className={styles.dateRangeCol}>
                      <ProForm.Item name={endName} noStyle>
                        <ProFormDatePicker getPopupContainer={getPopupContainer} />
                      </ProForm.Item>
                    </Col>
                  </Row>
                </ProForm.Item>
              </React.Fragment>
            );
            break;

          default:
            break;
        }
        return formItem;
      }),
    [data],
  );
  return (
    <QueryFilter
      defaultColsNumber={defaultColsNumber}
      labelWidth={labelWidth}
      preserve={preserve}
      {...props}
    >
      {formItemChildren}
    </QueryFilter>
  );
};

CustomerQueryForm.propTypes = {
  defaultColsNumber: PropTypes.number,
  data: PropTypes.array,
  preserve: PropTypes.bool,
  labelWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
};

CustomerQueryForm.defaultProps = {
  defaultColsNumber: 5,
  data: [],
  preserve: false,
  labelWidth: 100,
};

export default CustomerQueryForm;
